<template>
  <Modal :value="visible"
         :title="title"
         @on-visible-change="onChangeVisible"
         width="780">
    <div class="flex ">
      <div class="menu">
        <div v-for="(item,index) in menuArr"
             :key='index'
             class="cursor-pointer"
             :class="{'current-menu':currentIndex == index}"
             @click.stop="onClickMenuItem(index)">
          {{item.name}}
        </div>
      </div>
      <div class="item-menu"
           v-if="currentIndex == 1">
        <div class=" cursor-pointer"
             v-for="(item,index) in itemMenuArr"
             :key='index'
             :class="{'current-menu':currentItemIndex == index}"
             @click.stop="onClickItemMenuItem(index)">{{item.name}}
        </div>
      </div>
      <div class="modal-cont flex-1">
        <ul class="form-ul">
          <li class="form-ul-li half"
              v-if="currentIndex == 0">
            <p class="li-title">作业规则：</p>
            <Select v-model="ruleId"
                    label-in-value
                    @on-change="onChangeRule"
                    clearable>
              <Option v-for="item in ruleArr"
                      :value="item.workRuleId"
                      :key="item.workRuleId">{{ item.ruleName }}</Option>
            </Select>
          </li>
          <li class="form-ul-li"
              v-if="currentIndex == 1">
            <p class="li-title">人员：</p>
            <!-- 固定作业为单选，机动作业为多选 -->
            <MyTreeSelect ref="personTreeSelect"
                        :data="personTreeData"
                        placeholder="人员名称"
                        search
                        checked
                        style="width: 100%"
                        @onCheckChange="onChangePerson">
            </MyTreeSelect>            
            <!-- <Input v-model="driver"
                   placeholder="驾驶员"
                   readonly
                   style="width:200px" /> -->
          </li>
          <div class="car"
               v-if="currentIndex == 1">
            <div class="person-item"
                   v-for="(item, index) in personList"
                   :key="index"
                   @click.stop="">
                <span class="line1">{{ item.name }}</span>
                <Icon custom="i-icon icon-guanbi"
                      size="16"
                      color="#6a6b75"
                      @click.stop="personList.splice(index, 1)" />
              </div>
          </div>
          <li class="form-ul-li"
          v-if="currentIndex == 2">
          <p class="li-title">排班类型：</p>
          <RadioGroup v-model="schedulingType">
            <Radio :label="1">
              <span>手动(手动按月排班)</span>
            </Radio>
            <!-- 暂时隐藏自动排班 -->
            <Radio :label="2">
              <span>自动(按规则排班)</span>
            </Radio>
          </RadioGroup>
        </li> 
        </ul>
        <!-- 手动排班 -->
      <div v-show="schedulingType == '1'"
           class="manual">
        <div class="manual-clear">
          <p @click.stop="onClickManualClear">
            <Icon custom="i-icon icon-shanchu1"
                  size="16" />
            清空当月排班
          </p>
        </div>
        <el-calendar v-model="calendarData"
                     class="manual-calendar">
          <template slot="dateCell"
                    slot-scope="{ data }">
            <!-- 非当月 -->
            <div class="flex a-center j-center"
                 style="width: 100%; height: 100%"
                 v-if="data.type != 'current-month'">
              {{ data.day.split("-").slice(2).join("") }}
            </div>
            <!-- 当月 -->
            <div class="calendar-cont"
                 v-if="data.type == 'current-month'"
                 @click.stop="onClickDatePlan(getCurrentDate(data.day))">
              <div class="warning-icon"
                   v-if="
                  getCurrentDate(data.day) &&
                  getCurrentDate(data.day).isWarning == 1
                ">
                <Icon custom="i-icon icon-tishi1"
                      size="18"
                      color="red"></Icon>
              </div>
              <div class="calendar-cont-top">
                {{ data.day.split("-").slice(2).join("") }}
              </div>
              <div class="calendar-cont-bottom">
                <template v-if="getCurrentDate(data.day)">
                  <!-- 有排班 -->
                  <template v-if="
                      getCurrentDate(data.day).groupName &&
                      getCurrentDate(data.day).groupId
                    ">
                    <div class="calendar-cont-bottom-group">
                      <div class="group-item">
                        <div v-for="(items, indexs) in getCurrentDate(data.day)
                            .groupArr"
                             :key="indexs"
                             class="line1"
                             :title="getGroupMsg(getCurrentDate(data.day), items)">
                          {{ getGroupMsg(getCurrentDate(data.day), items) }}
                        </div>
                      </div>
                      <div class="group-btns">
                        <span class="line1"
                              :title="getCurrentDate(data.day).groupName">{{ getCurrentDate(data.day).groupName }}</span>
                        <p v-if="isBeyondDate(data.day)">
                          <Icon custom="i-icon icon-xiugai"
                                size="16"
                                color="#0079fe"
                                title="修改"
                                @click.stop="onClickManualSetGroup(data.day)" />
                          <!-- <Icon custom="i-icon icon-shijian"
                                size="16"
                                color="#0079fe"
                                title="休假"
                                @click.stop="onClickManualHoliday(data.day)" /> -->
                          <Icon custom="i-icon icon-shanchu1"
                                size="16"
                                color="#0079fe"
                                title="清空"
                                @click.stop="onClickManualDelete(data.day)" />
                        </p>
                      </div>
                    </div>
                  </template>
                  <!-- 休假 -->
                  <template v-if="!getCurrentDate(data.day).groupId">
                    <div class="calendar-cont-bottom-leave">
                      <Icon custom="i-icon icon-xiu"
                            size="26"
                            color="#0eb36e" />
                    </div>
                    <div class="calendar-cont-bottom-btns"
                         v-if="isBeyondDate(data.day)">
                      <Icon custom="i-icon icon-wuziqingkuang"
                            size="14"
                            title="复制昨天"
                            color="#6c6d6e"
                            @click.stop="onClickManualCopyYesterday(data.day)" />
                      <Icon custom="i-icon icon-tianjia1"
                            size="14"
                            title="添加班组"
                            color="#6c6d6e"
                            @click="onClickManualSetGroup(data.day)" />
                    </div>
                  </template>
                </template>
                <template v-else>
                  <!-- 无排班 -->
                  <div class="calendar-cont-bottom-btns"
                       v-if="isBeyondDate(data.day)">
                    <Icon custom="i-icon icon-wuziqingkuang"
                          size="14"
                          title="复制昨天"
                          color="#6c6d6e"
                          @click.stop="onClickManualCopyYesterday(data.day)" />
                    <!-- <Icon custom="i-icon icon-shijian"
                          size="14"
                          color="#6c6d6e"
                          title="休假"
                          @click.stop="onClickManualHoliday(data.day)" /> -->
                    <Icon custom="i-icon icon-tianjia1"
                          size="14"
                          title="添加班组"
                          color="#6c6d6e"
                          @click="onClickManualSetGroup(data.day)" />
                  </div>
                </template>
              </div>
            </div>
          </template>
        </el-calendar>
      </div>
      <!-- 自动排班 -->
      <div class="automatic"
           v-show="schedulingType == '2'">
        <div class="automatic-title">
          <div class="automatic-title-left">
            <span class="automatic-title-left-span">倒班规律</span>
            <!-- <div class="automatic-title-left-empty"
                 @click="onClickAutomaticEmpty">
              <Icon custom="i-icon icon-shanchu1"
                    size="16"
                    color="#fe0000" />
              清空排班
            </div>
            <div class="automatic-title-left-add"
                 @click.stop="onClickAutomaticAddPeriod">
              <Icon custom="i-icon icon-tianjia1"
                    size="16"
                    color="#1785fe" />
              添加周期
            </div> -->
          </div>
          <div class="automatic-title-right">
            查看排班说明>>
            <Poptip trigger="hover"
                    content="content"
                    placement="bottom-end">
              <Icon custom="i-icon icon-tishi1"
                    size="20"
                    color="#0079fe"
                    class="cursor-pointer" />
              <div slot="content"
                   class="tip">
                <Icon custom="i-icon icon-shanchu1"
                      size="16"
                      color="#6c6d6e" />
                <span>{{ schedulingExplain }}</span>
              </div>
            </Poptip>
          </div>
        </div>
        <div class="automatic-cont">
          <ul class="automatic-cont-plan">
            <li class="automatic-cont-plan-item"
                v-for="(item, index) in automaticList"
                :key="index">
              <!-- <div class="item-top">
                <Input prefix="md-create"
                       placeholder="填写倒班周期"
                       maxlength="30"
                       v-intLimit
                       clearable
                       class="item-top-input" />
              </div> -->
              <div class="item-bottom">
                <!-- 休假 -->
                <div class="item-bottom-leave"
                     v-show="item.leave">
                  <Icon custom="i-icon icon-xiu"
                        size="26"
                        color="#0eb36e" />
                </div>
                <!-- 有排班 -->
                <div class="item-bottom-group"
                     v-if="item.groupArr && item.groupArr.length != 0">
                  <div class="group-item">
                    <div v-for="(items, indexs) in item.groupArr"
                         :key="indexs"
                         class="line1"
                         :title="getGroupMsg({ groupType: item.groupType }, items)">
                      {{ getGroupMsg({ groupType: item.groupType }, items) }}
                    </div>
                  </div>
                  <div class="group-btns">
                    <span class="line1"
                          :title="item.groupName">{{
                      item.groupName
                    }}</span>
                    <p class="li-title">
                      <Icon custom="i-icon icon-xiugai"
                            size="16"
                            color="#0079fe"
                            title="修改"
                            @click.stop="onClickAutomaticSetGroup(index)" />
                      <!-- <Icon custom="i-icon icon-shijian"
                            size="16"
                            color="#0079fe"
                            title="休假"
                            @click.stop="onClickAutomaticLeave(index)" /> -->
                      <Icon custom="i-icon icon-shanchu1"
                            size="16"
                            color="#0079fe"
                            title="清空"
                            v-if="index != 0"
                            @click.stop="onClickAutomaticDeletePeriod(index)" />
                    </p>
                  </div>
                </div>
                <!-- 无排班 -->
                <div class="item-bottom-btns"
                     v-else>
                  <Icon custom="i-icon icon-tianjia1"
                        size="14"
                        title="添加班组"
                        color="#6c6d6e"
                        @click.stop="onClickAutomaticSetGroup(index)" />
                  <!-- <Icon custom="i-icon icon-shijian"
                        size="14"
                        color="#6c6d6e"
                        title="休假"
                        @click.stop="onClickAutomaticLeave(index)"
                        v-if="!item.leave" /> -->
                  <Icon custom="i-icon icon-shanchu1"
                        size="14"
                        title="删除周期"
                        color="#6c6d6e"
                        v-if="index != 0"
                        @click.stop="onClickAutomaticDeletePeriod(index)" />
                </div>
              </div>
            </li>
          </ul>
          <div class="flex a-center timeframe">
            <p class="li-title"><span class="p-must">*</span>有效时段：</p>
            <DatePicker type="date"
                        :value="startTime"
                        :options="dateOptions"
                        :editable="false"
                        placeholder=""
                        @on-change="onChangeStartTime"></DatePicker>
            <span class="timeframe-sign">~</span>
            <DatePicker type="date"
                        :value="endTime"
                        :options="dateOptions"
                        :editable="false"
                        placeholder=""
                        @on-change="onChangeEndTime"></DatePicker>
          </div>
        </div>
        <div class="automatic-footer">
          <Icon custom="i-icon icon-jingshi"
                size="15"
                color="red"
                class="m-r-5"
                style="line-height: 14px" />
          当前平台设置为{{ summerTime }}至{{ winterTime }}为夏季作息时间，{{
            winterTime
          }}至{{ summerTime }}为冬季作息时间
        </div>
      </div>
        <!-- <div class="flex j-center a-center"
             v-if="currentIndex != 1">
          <Icon type="ios-alert-outline"
                size="20"
                color="#FF0000"
                class="m-r-5"/>
          当批量操作的信息间此项内容不同时，将不显示，进行操作后将修改为相同内容。
        </div> -->
      </div>
    </div>
    <div slot="footer">
      <Button @click.stop="onClickCancel">取消</Button>
      <Button type="primary"
              :loading="loading"
              @click.stop="onClickConfirm">确定</Button>
    </div>
  </Modal>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';
import MyTreeSelect from '@/components/common/MyTreeSelect';
import WorkTimeModal from '@/components/product/admin/modal/work/WorkTimeModal'
import { getTomorrow, formatDate } from '@/utils/dateRangUtil'
export default {
  components: {
    MyTreeSelect,
    WorkTimeModal
  },
  model: {
    prop: 'visible',
    event: 'onChange'
  },
  props: {
    title: {
      type: String,
      default: '修改排班'
    },
    visible: Boolean,
    dataId: String,
    workType: Number
  },
  data () {
    return {
      loading: false,
      personList: [], // 人员
      menuArr: [
        {
          name: '作业规则'
        }, {
          name: '人员'
        }, {
          name: '排班时段'
        }
      ],
      currentIndex: 1,
      calendarData: new Date(),
      itemMenuArr: [
        {
          name: '增加人员'
        }, {
          name: '删除人员'
        },
        
      ],
      // currentItemIndex: 0,
      // dateOptions: {
      //   disabledDate (date) {
      //     return date && date.valueOf() < Date.now()
      //   }
      // },
      currentItemIndex: 0,
      dateOptions: {
        disabledDate (date) {
          return date && date.valueOf() < Date.now()
        }
      },
      endDateDisabled: false,
      type: '',   // 固定作业，机动作业
      workBigType: [], // 作业类型
      workBigTypeId: [], // 作业类型
      car: '', // 作业车辆
      carId: '', // 作业车辆id
      driver: '', // 驾驶员
      driverId: '', // 驾驶员id
      carList: [],        // 车辆列表
      carAddList: [],     // 新增车辆列表
      carDeleteList: [],  // 删除车辆列表
      group: '', // 作业班组
      groupId: '', // 作业班组
      rule: '', // 作业规则
      ruleId: '', // 作业规则
      period: '', // 作业周期
      count: '2', // 趟次
      oilLoss: '', // 油耗
      waterLoss: '', // 水耗
      workTime: '', // 作业时长
      startTime: '', // 有效时段
      endTime: '', // 有效时段
      remark: '', // 备注
      periodArr: [
        {
          id: 1,
          name: '每天'
        },
        {
          id: 2,
          name: '两天'
        },
        {
          id: 3,
          name: '三天'
        },
        {
          id: 7,
          name: '一周'
        },
      ],
      ruleArr: [],
      groupTreeArr: [],
      workBigTypeArr: [
        {
          children: [],
          id: '74468e83218d866cb341232ffae4618a',
          itemlist: [],
          label: '清扫作业',
          name: '清扫作业',
          type: 'car',
          value: '74468e83218d866cb341232ffae4618a',
        },
        {
          children: [],
          id: '53616f89f4238e20b108eae870a8cdb2',
          itemlist: [],
          label: '洒水作业',
          name: '洒水作业',
          type: 'car',
          value: '53616f89f4238e20b108eae870a8cdb2',
        },
      ],
    }
  },
  watch: {
    dataId (newVal) {
      newVal && this.getDetail()
    },
    visible (newVal) {
      if (newVal) {
        this.calendarData = new Date();
        this.getGroupList()
        this.getRuleList()
      }
    },
    workType (newVal) {
      if (newVal) {
        this.type = newVal
      }
    },
  },
  computed: {
    ...mapGetters({
       personTreeData: "getPersonTreeList",
      'gridNameTreeArr': 'getGridTreeList'
    }),
  },
  mounted () {
    this.init()
  },
  methods: {
    ...mapActions([
      'updateGridTreeList'
    ]),
    init () {
      this.updateGridTreeList()
      this.timeInit()
    },
    getDetail () {
      // this.$store.dispatch('getCarDetail', this.dataId).then(res => {
      //   for (let i in res) {
      //     this[i] = res[i]
      //   }
      // })
      this.personList = arr;
    },
    onClickMenuItem (i) {
      this.currentIndex = i
    },
    onClickItemMenuItem (index) {
      this.currentItemIndex =index
    },
    // 作业类型选择器回调，获取车辆列表
    onChangeWorkType (value) {
      this.carId = ''
      this.car = ''
      this.driverId = ''
      this.driver = ''
      let index = this.workBigTypeArr.findIndex(item => {
        return item.id == value[0]
      })
      this.workBigType = [this.workBigTypeArr[index].label]
      this.workBigTypeId = [this.workBigTypeArr[index].value]
      if (value.length == 2) {
        let subIndex = this.workBigTypeArr[index].children(item => {
          return item.id == value[1]
        })
        this.workBigType.push(this.workBigTypeArr[index].children[subIndex].label)
        this.workBigTypeId.push(this.workBigTypeArr[index].children[subIndex].value)
      }
      this.carDisabled = false
      // 获取车辆列表
      this.getCarTreeList(value)
    },
    // 获取车辆列表
    getCarTreeList (value) {
      let params = {
        carcategory: value[0],
        carcategoryitem: value[1] ? value[1] : ''
      }
      this.$http.getCarTreeList(params).then(res => {
        if (res.code === 200) {
          this.carTreeArr = res.result
        }
      })
    },
    // 选择车辆 多选
    onChangeChangeCar (section) {
      let idArr = []
      let valueArr = []
      let driverIdArr = []
      let driverValueArr = []
      section.forEach(item => {
        if (item.type === 'car') {
          idArr.push(item.id)
          valueArr.push(item.name)
          driverIdArr.push(item.bindaccount)
          driverValueArr.push(item.bindaccountname)
        }
      })
      this.carId = idArr.join()
      this.car = valueArr.join()
      this.driverId = driverIdArr.filter(item => item).join()
      this.driver = driverValueArr.filter(item => item).join()
    },
    // 选择车辆 单选
    onChangeSelectCar (section) {
      if (this.type == 1) {
        if (section.type == 'car') {
          this.carId = section.id
          this.car = section.name
          this.driverId = section.bindaccount
          this.driver = section.bindaccountname
        }
      }
    },
    // 选择人员
    onChangePerson (section) {
      let dataArr = []
      section.forEach((item) => {
        if (item.type === "user") {
          dataArr.push(item)
        }
      })
      dataArr.forEach(t => {
        let isFind = false;
        for (let i = 0; i < this.personList.length; i++) {
          if (t.id == this.personList[i].id) {
            isFind = true;
            break;
          }
        }
        if (!isFind) {
          this.personList.push(t);
        }
      })
    },
    // 人员单独修改过 触发
    onClickDatePlan (item) {
      if (!item || item.isWarning == 0) return;
      this.$Modal.info({
        title: "改动",
        content: "当日数据改动，请前往详情列表查看。",
      });
    },
    // 获取当前日期
    getCurrentDate (date) {
      return this.manualList.find((item) => item.date === date);
    },
    // 手动排班复制昨天
    onClickManualCopyYesterday (date) {
      let newDate = new Date(date);
      newDate.setDate(newDate.getDate() - 1);
      let lastDateItem = this.getCurrentDate(formatDate(newDate));
      if (lastDateItem) {
        let newObj = JSON.parse(JSON.stringify(lastDateItem));
        newObj.date = date;
        let index = this.manualList.findIndex((item) => item.date === date);
        if (index !== -1) {
          this.manualList.splice(index, 1, newObj);
        } else {
          this.manualList.push(newObj);
        }
      } else {
        this.$Message.info("无可复制班次");
      }
    },
    // 获取作业班组列表
    getGroupList () {
      let params = {
        module: 3
      }
      this.$http.getWorkGroupItemAllList(params).then(res => {
        if (res.code === 200) {
          this.groupTreeArr = res.result.map(item => {
            item.name = item.depName
            item.id = item.depid
            item.type = 'depart'
            if (item.children) {
              item.children = item.children.map(items => {
                items.type = 'group'
                return items
              })
            }
            return item
          })
        }
      })
    },
    // 选择班组
    onChangeGroup (section) {
      if (section.type == 'group') {
        this.groupId = section.workGroupId
        this.group = section.name
      }
    },
    // 获取作业规则列表
    getRuleList () {
      let params = {
        page: 1,
        size: 999,
        module: 3
      }
      this.$http.getWorkRuleList(params).then(res => {
        if (res.code === 200) {
          this.ruleArr = res.result.workRules
        }
      })
    },
    // 作业规则回调
    onChangeRule (data) {
      if (data) {
        this.rule = data.label
        this.ruleId = data.value
      }
    },
    // 有效时段开始时间
    onChangeStart (value) {
      this.startTime = value
    },
    // 有效时段结束时间
    onChangeEnd (value) {
      this.endTime = value
    },
    // 日期选择器赋初始值
    timeInit () {
      let time = new Date()
      // this.startTime = time.getFullYear() + '-01-01'
      this.startTime = getTomorrow()
      this.endTime = time.getFullYear() + '-12-31'
    },
    // 确定按钮
    onClickConfirm () {
      if (!this.personList.length) return this.$Message.info("请选择人员");
      this.loading = true
      let params = {
        // plan: this.plan,
        // gridName: this.gridName,
        // gridNameId: this.gridNameId,
        // workTypeName: this.workBigType[0],
        // workTypeId: this.workBigTypeId[0],
        // workSubTypeName: this.workBigType[1] ? this.workBigType[1] : '',
        // workSubTypeId: this.workBigTypeId[1] ? this.workBigTypeId[1] : '',
        // car: this.car,
        // carId: this.carId,
        // driver: this.driver,
        // driverId: this.driverId,
        group: this.group,
        groupId: this.groupId,
        // rule: this.rule,
        // ruleId: this.ruleId,
        // period: this.period,
        // count: this.count,
        // oilLoss: this.oilLoss,
        // waterLoss: this.waterLoss,
        // workTime: this.workTime,
        // startTime: this.startTime,
        // endTime: this.endTime,
        // remark: this.remark,
        // type: this.type,
        // status: this.status
      }
      if (this.dataId) params.ids = this.dataId
      this.$store.dispatch('createOrEditMechanicalCleanPlan', params).then(res => {
        this.$emit('onClickConfirm', params)
        this.$emit('onChange', false)
        // 更新下拉框
        // this.$store.dispatch('updateCarManufacturerAllList', true)
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
      // 人员id
      let personIds = [];
      this.personList.forEach((item) => {
        personIds.push(item.id);
      });
    },
    // 清空手动排班
    onClickManualClear () {
      this.$Modal.confirm({
        title: "清空",
        content: "确认清空当月排班?",
        onOk: () => {
          this.manualList = [];
        },
      });
    },
    onClickCancel () {
      this.$emit('onClickCancel')
      this.$emit('onChange', false)
    },
    onChangeVisible (boo) {
      if (!boo) {
        this.$emit('onChange', false)
        this.$emit('update:dataId', '')
        this.resetData()
      }
    },
    resetData () {
      this.workBigType = []
      this.workBigTypeId = []
      this.personList = [];
      this.car = ''
      this.carId = ''
      this.driver = ''
      this.driverId = ''
      this.group = ''
      this.groupId = ''
      this.rule = ''
      this.ruleId = ''
      this.period = ''
      this.count = 2
      this.oilLoss = ''
      this.waterLoss = ''
      this.workTime = ''
      this.remark = ''
      this.status = 1
      this.$refs.personTreeSelect.resetTreeData();
      this.timeInit()
      this.endDateDisabled = false
    }
  }
}
</script>

<style lang="scss" scoped>
.menu {
  padding: 10px 20px;
  width: 130px;
  border-right: 1px solid #bbbbbb;
  div {
    line-height: 25px;
  }
  .current-menu {
    color: #25bb96;
  }
}
.item-menu {
  padding: 10px 20px;
  width: 100px;
  border-right: 1px solid #bbbbbb;
  div {
    line-height: 30px;
  }
  .current-menu {
    color: #25bb96;
  }
}
.car {
  width: 100%;
  height: 100px;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 4px 7px;
  margin: 0 20px;
  cursor: pointer;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
  .car-item {
    width: 85px;
    height: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 6px 6px 0;
    padding-left: 4px;
    border: 1px solid #e1e4e6;
    border-radius: 3px;
  }
}
.person-item {
    width: 85px;
    height: 24px;
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 6px 6px 0;
    padding-left: 4px;
    border: 1px solid #e1e4e6;
    border-radius: 3px;
  }
  // 手动排班
.manual {
  .manual-clear {
    display: flex;
    justify-content: flex-end;
    padding: 0 20px;
    p {
      padding: 0 12px;
      height: 24px;
      border: 1px solid #fe0000;
      color: #fe0000;
      border-radius: 14px;
      cursor: pointer;
      display: flex;
      align-items: center;
    }
  }
  .manual-calendar {
    .calendar-cont {
      position: relative;
      .warning-icon {
        position: absolute;
        top: -5px;
        right: 5px;
      }
      .calendar-cont-top {
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .calendar-cont-bottom {
        display: flex;
        flex-direction: column;
        min-height: 110px;
        padding-top: 6px;
        .calendar-cont-bottom-leave {
          text-align: center;
        }
        .calendar-cont-bottom-group {
          display: flex;
          flex-direction: column;
          flex: 1;
          color: #444;
          font-size: 12px;
          .group-item {
            flex: 1;
            div {
              // width: 90%;
              margin: 0 0px 4px;
              line-height: 22px;
            }
          }
          .group-btns {
            height: 30px;
            line-height: 30px;
            background-color: #e6e8f0;
            color: #0079fe;
            display: flex;
            justify-content: space-around;
            span {
              width: 60px;
            }
            p {
              i {
                margin-right: 2px;
                cursor: pointer;
              }
            }
          }
        }
        .calendar-cont-bottom-btns {
          width: 100%;
          height: 30px;
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: -50%;
          color: #444;
          display: flex;
          justify-content: center;
          align-items: center;
          i {
            width: 20px;
            height: 20px;
            background-color: #eee;
            border-radius: 50%;
            border: 1px solid #ddd;
            cursor: pointer;
            margin-right: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
          }
          i:hover {
            background: #ddd;
          }
          i:last-child {
            margin-right: 0;
          }
        }
      }
    }
  }
}
// 自动排班
.automatic {
  .automatic-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
    // border-bottom: 1px solid #ddd;
    background-color: #f5f8f9;
    margin-bottom: 10px;
    padding-left: 10px;
    .automatic-title-left {
      display: flex;
      .automatic-title-left-span {
        font-weight: 700;
        font-size: 16px;
        padding-left: 10px;
        border-left: 2px solid #25bb96;
      }
      .automatic-title-left-empty,
      .automatic-title-left-add {
        box-sizing: border-box;
        padding: 0 12px;
        height: 26px;
        line-height: 24px;
        margin-left: 14px;
        border: 1px solid #fe0000;
        color: #fe0000;
        border-radius: 14px;
        cursor: pointer;
        font-size: 12px;
      }
      .automatic-title-left-add {
        border: 1px solid #0079fe;
        color: #1785fe;
      }
    }
    .automatic-title-right {
      color: #0079fe;
      .tip {
        display: flex;
        align-items: flex-start;
        color: #6c6d6e;
        span {
          margin-left: 4px;
        }
      }
    }
  }
  .automatic-cont {
    .automatic-cont-plan {
      display: flex;
      flex-wrap: wrap;
      .automatic-cont-plan-item {
        width: 14%;
        padding-bottom: 0;
        border: 1px solid #ddd;
        border-right: none;
        position: relative;
        .item-top {
          display: flex;
          align-items: center;
          padding: 5px 5px 0;
          .item-top-input {
            ::v-deep {
              .ivu-input {
                border: none;
                padding-right: 0;
                padding-left: 20px;
                text-align: center;
              }
              .ivu-input-prefix {
                width: 22px;
              }
            }
          }
        }
        .item-bottom {
          display: flex;
          flex-direction: column;
          min-height: 106px;
          padding-top: 6px;
          .item-bottom-leave {
            text-align: center;
          }
          .item-bottom-group {
            display: flex;
            flex-direction: column;
            height: 100px;
            color: #444;
            font-size: 12px;
            .group-item {
              flex: 1;
              div {
                // width: 90%;
                margin: 0 0px 4px;
                line-height: 22px;
                word-break: break-all;
              }
            }
            .group-btns {
              height: 30px;
              line-height: 30px;
              background-color: #e6e8f0;
              color: #0079fe;
              display: flex;
              justify-content: space-around;
              span {
                width: 60px;
              }
              p {
                i {
                  margin-right: 2px;
                  cursor: pointer;
                }
              }
            }
          }
          .item-bottom-btns {
            width: 100%;
            height: 30px;
            position: absolute;
            bottom: 0;
            left: 50%;
            margin-left: -50%;
            color: #444;
            display: flex;
            justify-content: center;
            align-items: center;
            i {
              width: 20px;
              height: 20px;
              background-color: #eee;
              border-radius: 50%;
              border: 1px solid #ddd;
              cursor: pointer;
              margin-right: 10px;
              display: flex;
              align-items: center;
              justify-content: center;
            }
            i:hover {
              background: #ddd;
            }
            i:last-child {
              margin-right: 0;
            }
          }
        }
      }
      .automatic-cont-plan-item:nth-child(7n) {
        border-right: 1px solid #ddd;
      }
      .automatic-cont-plan-item:nth-child(7) ~ li {
        border-top: 0;
      }
    }
    .timeframe {
      width: 50%;
      margin-top: 20px;
      p {
        line-height: 32px;
        min-width: 100px;
        text-align: right;
        .p-must {
          color: #ff0000;
          font-size: 16px;
          margin-right: 2px;
        }
      }

      .timeframe-sign {
        margin: 0 5px;
      }
    }
  }
  .automatic-footer {
    margin-top: 20px;
    padding-left: 20px;
    line-height: 40px;
    font-size: 12px;
    color: #6c6d6e;
    background-color: #fafbfc;
    display: flex;
    align-items: center;
  }
}
</style>